<template>
    <div>
        <el-button type="success" round @click="openEditUI(null)">添加工时记录</el-button>

        <template>
            <el-table :data="manhourList" stripe style="width: 100%">
                <el-table-column prop="created_at" label="录入时间">
                </el-table-column>
                <el-table-column prop="start_at" label="开始时间">
                </el-table-column>
                <el-table-column prop="end_at" label="结束时间">
                </el-table-column>
                <el-table-column prop="user.username" label="添加人">
                </el-table-column>
                <el-table-column prop="project.title" label="项目名称">
                </el-table-column>
                <el-table-column prop="day" label="工作天数">
                </el-table-column>
                <el-table-column prop="content" label="工作具体内容">
                </el-table-column>
                <el-table-column prop="check.username" label="上级项目经理">
                </el-table-column>
                <el-table-column prop="state" label="状态">
                </el-table-column>
                <el-table-column prop="guishu" label="年度归属">
                </el-table-column>
                <el-table-column label="操作" prop="desc">
                    <template slot-scope="scope">
                        <el-button type="primary" round @click="openEditUI(scope.row.id)">修改</el-button>
                        <el-button type="danger" @click="pass(scope.row.id, 1)" round>通过</el-button>
                        <el-button type="danger" @click="pass(scope.row.id, 2)" round>驳回</el-button>
                        <el-button type="text" @click="deleteManhour(scope.row.id)">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!-- 添加记录 -->
        <el-dialog @close="clearForm" :title="formTitle" id="addUser" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="formRef">

                <el-form-item label="选择审批人">
                    <el-select v-model="form.check" placeholder="选择审批人">
                        <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="选择项目">
                    <el-select v-model="form.project_id" multiple filterable @change="aa()" remote reserve-keyword
                        placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
                        <el-option v-for="item in options" :key="item.value" @clieck="alert(1)" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="form.project_id" placeholder="选择项目">
                        <el-option label="2023" value="2023"></el-option>
                        <el-option label="2024" value="2024"></el-option>
                        <el-option label="2025" value="2025"></el-option>
                        <el-option label="2026" value="2026"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="时间范围">
                    <el-date-picker :value-format="'yyyy-MM-dd HH:mm:ss'" v-model="form.time" type="daterange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>


                <el-form-item label="工作具体内容">
                    <el-col :span="12">
                        <el-input v-model="form.content" placeholder="输入工作具体内容" />
                    </el-col>
                </el-form-item>


                <el-form-item label="时长">
                    <el-col :span="12">
                        <el-input v-model="form.day" placeholder="单位是天" />
                    </el-col>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="clickConfirm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加记录 -->
    </div>
</template>
  
<script>
import workbenchApi from '@/api/workbench'
import clientApi from '@/api/client'

export default {
    data() {
        return {
            formTitle: '',
            form: {},
            searchModel: {},
            manhourList: [],
            dialogFormVisible: false,
            managerList: [],

        }

    },

    methods: {

        getProjectAll() {
            clientApi.getAllClient().then(response => {
                this.list = response.data.list.map(item => {
                    return { value: `${item['id']}`, label: `${item['name']}` };
                });
            })
        },

        //通过审核
        pass(id, state) {
            if (state == 1) {
                var title = "审核通过"
            } else {
                var title = "驳回"
            }
            this.$alert('确认' + title, title, {
                confirmButtonText: '确定',
                callback: action => {
                    workbenchApi.check(id, state).then(response => {
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });
                        this.getManhourList();

                    })

                }
            });
        },


        //添加/修改工时记录
        clickConfirm() {
            console.log(this.form);
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    this.form.contract_id = this.id
                    workbenchApi.saveManhour(this.form).then(response => {
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });

                        this.getManhourList();
                        this.dialogFormVisible = false;
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        //打开添加/修改工时记录表单
        openEditUI(id) {
            if (id == null) {
                this.formTitle = "添加工时记录";
            } else {
                this.formTitle = "修改工时记录";
                //根据id获取证件信息
                workbenchApi.getManhourById(id).then(response => {
                    this.form = response.data.info;
                })
            }
            this.dialogFormVisible = true;
        },

        //删除记录
        deleteManhour(id) {

            this.$confirm(`此操作将删除此记录, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                workbenchApi.delManhourById(id).then(response => {
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                    this.getManhourList();
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        //获取工时记录列表
        getManhourList() {
            workbenchApi.getManhourList(this.searchModel).then(response => {
                this.manhourList = response.data.list.data;
            })
        },

        //获取经理列表
        getManagerList() {
            clientApi.getUidList().then(response => {
                this.managerList = response.data;
            })
        },

        //获取项目列表
        getProjectList() {

        },


        //清除form表单
        clearForm() {
            this.form = {};
            this.$refs.formRef.clearValidate();
        },
    },
    created() {
        this.getManhourList();
        this.getManagerList();
        this.getProjectList();
    },

    mounted() {
        this.getProjectAll();
    }
}
</script>
  
<style></style>